<template>
  <base-dialog  v-bind="$attrs" v-on="$listeners" title="修改密码" @submit="submit(0)" top="15%" size="tiny">
  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="旧密码" prop="password">
      <el-input
        v-model="user.password"
        placeholder="请输入原来的密码"
        type="password"
      />
    </el-form-item>
    <el-form-item label="新密码" prop="new_password">
      <el-input
        v-model="user.new_password"
        placeholder="密码格式为由大写字母开头，大小写字母、数字、特殊字符中的至少3种组成8~30位的字符串"
        type="password"
      />
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input
        v-model="user.confirmPassword"
        placeholder="请再次输入新密码"
        type="password"
      />
    </el-form-item>
  </el-form>
  </base-dialog>
</template>

<script>
import user from "@/api/systemManagement/user/index";
import BaseDialog from "@/components/Common/BaseDialog";

export default {
  name:"resetPwd",
  components: {BaseDialog},
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.new_password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      test: "1test",
      user: {
        password: undefined,
        new_password: undefined,
        confirmPassword: undefined
      },
      // 表单校验
      rules: {
        password: [
          { required: true, message: "旧密码不能为空", trigger: "blur" }
        ],
        new_password: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          {pattern:/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^(0-9a-zA-Z)]).{8,32}$/, message: "密码必须包含字母，数字，特殊字符", trigger: "blur"},
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      }
    };
  },
  created() {
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          user.changePwd(this.user).then(() => {
            this.msgSuccess("修改成功!");
            this.$emit("update:visible",false)
          });
        }
      });
    },
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/" });
    }
  }
};
</script>
